<template>
	<!-- 聊天气泡 -->
	<!-- 只有div才能获取到坐标 -->
	<div @longpress="long">
		<!-- 时间显示 -->
		<!-- 每一条都要跟上面的对比 如果在一定时间内就不显示 -->
		<view v-if="showTime" class="flex align-center justify-center pb-4 pt-2">
			<text class="font-sm text-light-muted">{{showTime}}</text>
		</view>
		
		<!-- 显示撤回 -->
		<view v-if="item.isremove" ref="isremove" 
		class="flex align-center justify-center pb-4 pt-1">
			<text class="font-sm text-light-muted">{{ isself ? '你' : '对方' }}撤回了一条信息</text>
		</view>
		<!-- 系统消息 -->
		<view v-if="item.type === 'system'"
		class="flex align-center justify-center pb-4 pt-1">
			<text class="font-sm text-light-muted">{{ item.data }}</text>
		</view>
		<!-- 气泡 -->
		<view v-if="item.type !== 'system' && !item.isremove" 
		class="flex align-start position-relative mb-3"
		:class="!isself ? 'justify-start' : 'justify-end'">
			<!-- 好友 -->
			<template v-if="!isself">
				<!-- 左 -->
				<free-avater size="70" :src="item.from_avatar" @click="openUser"></free-avater>
				<!-- 箭头 -->
				<text v-if="hasLabelClass" class="iconfont text-white font-md position-absolute chat-left-icon" :style="shownickname ? 'top: 45rpx;' : 'top:20rpx;'">&#xe606;</text>
			</template>
			
			<!-- 使用div限制宽度 -->
			<view class="flex flex-column">
				<!-- 昵称 -->
				<div v-if="shownickname" class="flex" 
				style="max-width: 500rpx; background-color: rgba(0, 0, 0, 0);"
				:class="nicknameClass" :style="labelStyle">
					<text class="font-sm text-muted">{{item.from_name}}</text>
				</div>
				<!-- 内容 -->
				<div class="p-2 rounded " style="max-width: 500rpx;"
				:class="labelClass" :style="labelStyle"
				>
					<!-- 文字 -->
					<text v-if="item.type === 'text'" class="font-md" :class="[isself? 'text-me-color':'text-you-color']" >{{item.data}}</text>
					<!-- 表情 | 图片-->
					<free-image v-else-if="item.type == 'emoticon' || item.type == 'image'" 
					:src="item.data" imageClass="rounded" @click="preview(item.data)" @longpress="stop"></free-image>
					<!-- 音频 -->
					<view v-else-if="item.type == 'audio'" class="flex align-center" 
					@tap="openAudio" @longpress="stop">
						<image class="mx-1" v-if="isself"
						:src="!audioPlaying? '/static/audio/audio3.png':'/static/audio/play.gif'" 
						style="width: 50rpx; height: 50rpx;"></image>
						<text class="font">{{item.options.time || 0}}''</text>
						<image class="mx-1" v-if="!isself"
						:src="!audioPlaying? '/static/audio/audio3.png':'/static/audio/play.gif'" 
						style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<!-- 视频 -->
					<view v-else-if="item.type === 'video'" class="position-relative rounded" 
					@tap="openVideo" @longpress="stop">
						<free-image :src="item.options.poster" imageClass="rounded" 
						:maxWidth="300" :maxHeight="350" @load="loadPoster"></free-image>
						<text class="iconfont text-white position-absolute" 
						style="font-size: 80rpx;" :style="posterIconStyle">&#xe737;</text>
					</view>
					
					<!-- 名片 -->
					<view v-else-if="item.type === 'card'" class="bg-white" style="width: 400rpx;" 
					hover-class="bg-light" @tap="openUserBase" @longpress="stop">
						<view class="p-3 flex align-center border-bottom border-light-secondary">
							<free-avater size="70" :src="item.options.avatar" clickType="false"></free-avater>
							<text class="font ml-2">{{item.data}}</text>
						</view>
						<view class="flex align-center px-2 py-1">
							<text class="font-small text-light-muted">个人名片</text>
						</view>
					</view>
				</div>
			</view>
			
			
			<!-- 本人 -->
			<template v-if="isself">
				<!-- 右 -->
				<text v-if="hasLabelClass" class="iconfont bg-text-chat-item font-md position-absolute chat-right-icon" :style="shownickname ? 'top: 45rpx;' : 'top:20rpx;'">&#xe605;</text>
				<!-- 右 -->
				<free-avater size="70" :src="item.from_avatar" @click="openUser"></free-avater>
			</template>
		</view>
		
		<!-- 发送是否成功提示 -->
		<view v-if="item.sendStatus && item.sendStatus !== 'success'" 
		class="flex align-center justify-end px-4">
			<text class="font" 
			:class="item.sendStatus === 'fail' ? 'text-danger' : 'text-muted'"
			>{{item.sendStatus === 'fail' ? '发送失败' : '发送中...'}}</text>
		</view>
	</div>
</template>

<script>
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import freeImage from "@/components/free-ui/free-image.vue"
	import $T from "@/common/free-lib/time.js"
	import { mapState,mapActions } from 'vuex'
	export default{
		props:{
			item:Object,
			index:Number,
			pretime: [Number,String],  //上一条信息的时间戳
			shownickname:{
				type:Boolean,
				default: false
			}
		},
		data(){
			return{
				innerAudioContext: null,
				audioPlaying: false,
				// 默认视频封面的宽高
				poster:{
					w:100,
					h:100
				}
			}
		},
		mounted() {
			// 注册全局是事件
			if(this.item.type === 'audio'){
				this.audioOn(this.onPlayAduio)
			}
			// 监听是否撤回信息
			// #ifdef APP-PLUS-NVUE
			this.$watch('item.isremove',(newVal,oldVal)=>{
				if(newVal){
					// 添加动画
					const animation = weex.requireModule('animation') //引入特效索引
					this.$nextTick(()=>{
						animation.transition(this.$refs.isremove, {
						    styles: {
								opacity: 1,
								timingFunction: 'ease'
						    },
						    duration: 300, //ms
						    timingFunction: 'ease',
						    }, function () {
						})
					})
				}
			})
			// #endif
		},
		// 组件销毁的时候
		beforeDestroy() {
			if(this.item.type === 'audio')
				this.audioOff(this.onPlayAduio)
			// 销毁音频
			if(this.innerAudioContext){
				this.innerAudioContext.destroy()
				this.innerAudioContext = null
			}
		},
		methods:{
			...mapActions(['audioOn','audioEmit','audioOff']),
			openUser(){
				uni.navigateTo({
					url: '/pages/mail/user-base/user-base?user_id=' + this.item.from_id
				});
			},
			// 打开名片
			openUserBase(){
				uni.navigateTo({
					url: '/pages/mail/user-base/user-base?user_id=' + this.item.options.id
				});
			},
			// 加载封面获取宽高
			loadPoster({w,h}){
				this.poster.w = w
				this.poster.h = h
			},
			// 监听播放音频的全局事件
			onPlayAduio(index){
				// 通知其他音频停止播放
				if(this.innerAudioContext)
					if(this.index !== index)
						this.innerAudioContext.onPause()
			},
			// 播放语音
			openAudio(){
				//  通知其他音频停止播放
				this.audioEmit(this.index)
				if(!this.innerAudioContext){ //防止重复创建上下文
					this.innerAudioContext = uni.createInnerAudioContext()
					this.innerAudioContext.src = this.item.data
					this.innerAudioContext.play()
					// 监听播放
					this.innerAudioContext.onPlay(()=>{
						this.audioPlaying = true
					})
					// 监听暂停
					this.innerAudioContext.onPause(()=>{
						this.audioPlaying = false
					})
					// 监听停止
					this.innerAudioContext.onStop(()=>{
						this.audioPlaying = false
					})
					// 监听错误
					this.innerAudioContext.onError(()=>{
						this.audioPlaying = false
					})
				}else{
					this.innerAudioContext.stop()
					this.innerAudioContext.play()
				}
			},
			// 预览图片
			preview(url){
				// 传给父组件处理预览图片
				this.$emit('preview',url)
			},
			// 长按事件
			long(e){
				if(this.item.type === 'system' || this.item.isremove) return;
				let x = 0;
				let y = 0;
				// #ifdef APP-PLUS-NVUE
				if(Array.isArray(e.changedTouches) && e.changedTouches.length > 0){
					x = e.changedTouches[0].screenX
					y = e.changedTouches[0].screenY
				}
				// #endif
				// #ifdef H5
				x = e.changedTouches[0].pageX
				y = e.changedTouches[0].pageY
				// #endif
				// #ifdef MP
				x = e.detail.x
				y = e.detail.y
				// #endif
				this.$emit('long',{
					x,
					y,
					index: this.index
				})
			},
			// 打开视频
			openVideo(){
				uni.navigateTo({
					url: "/pages/chat/video/video?url="+this.item.data
				})
			},
			stop(){}
		},
		components:{
			freeAvater,
			freeImage
		},
		computed:{
			...mapState({
				user:state=>state.user.user
			}),
			// 发送者是否是本人
			isself(){
				// 获取本人id
				let id = this.user.id ? this.user.id : 0
				return this.item.from_id === id
			},
			// 显示的时间
			showTime(){
				return $T.getChatTime(this.item.create_time, this.pretime)
			},
			hasLabelClass(){
				return	this.item.type === 'text' || this.item.type == 'audio'
			},
			// 气泡样式
			labelClass(){
				let label = this.hasLabelClass ? 'bg-chat-item mr-3' : 'mr-3'
				return this.isself ? label : 'bg-white ml-3'
			},
			nicknameClass(){
				let justify = this.isself ? 'justify-end' : ''
				return justify+ ' ' + this.labelClass
			},
			labelStyle(){
				if(this.item.type == 'audio'){
					let time = this.item.options.time || 0
					let width = parseInt(time) / (60/500)
					width = width < 150 ? 150 : width
					return `width:${width}rpx;`
				}
			},
			// 视频封面图标位置
			posterIconStyle(){
				let w = this.poster.w/2 - uni.upx2px(80)/2
				let h = this.poster.h/2 - uni.upx2px(80)/2
				return `left:${w}px;top:${h}px`
			}
		}
	}
</script>

<style scoped>
	.chat-left-icon{
		left: 80rpx;
	}
	.chat-right-icon{
		right: 80rpx;
	}
	.chat-animate{
		/* #ifdef APP-PLUS-NVUE */
		opacity: 0;
		/* #endif */
	}
</style>